function renderCategory() {
    $.ajax({
        url: '/my/category/list',
        success: function(res) {
            if (res.status === 0) {
                let arr = []
                res.data.forEach(item => {
                    arr.push(`
          <tr>
          <td>${item.name}</td>
          <td>${item.alias}</td>
          <td>
          <button data-id="${item.id}" data-name="${item.name}" data-alias="${item.alias}" type="button" class="layui-btn layui-btn-xs">编辑</button>
          <button data-id="${item.id}" type="button" class="del layui-btn layui-btn-xs layui-btn-danger">删除</button>
          </td>
          </tr> `)
                });
                $('tbody').html(arr.join(''))
            }
        }
    })
}

renderCategory()


$('tbody').on('click', 'button:contains("删除")', function() {
    let id = $(this).data('id')
    layer.confirm('你确定要删除吗？', function(index) {
        $.ajax({
            url: '/my/category/delete',
            data: { id: id },
            success: function(res) {
                if (res.status === 0) {
                    layer.msg(res.message)
                    renderCategory()
                }
            }
        })
        layer.close(index);
    })
})


// 点击分类实现弹层
let addIndex

$('button:contains("添加类别")').on('click', function() {
    addIndex = layer.open({
        type: 1,
        title: '添加类别',
        content: $('#tpl-add').html(), // 内容在HTML中
        area: ['500px', '250px']
    })
})

// 添加类别
$('body').on('submit', '#add-form', function(e) {
    e.preventDefault()
    let data = $(this).serialize()
    console.log(data);
    $.ajax({
        type: 'POST',
        url: '/my/category/add',
        data: data,
        success: function(res) {
            if (res.status === 0) {
                layer.msg(res.message)
                renderCategory()
                layer.close(addIndex)
            }
        }
    })
})

// 弹出编辑框
$('body').on('click', 'button:contains("编辑")', function() {
    let data = $(this).data()
    editIndex = layer.open({
        type: 1,
        title: '编辑分类',
        content: $('#tpl-edit').html(),
        area: ['500px', '250px'],
        // 弹层弹出后的回调，不要和ajax中的success弄混了
        success: function() {
            $('#edit-form  input[name="name"]').val(data.name)
            $('#edit-form  input[name="alias"]').val(data.alias)
            $('#edit-form  input[name="id"]').val(data.id)
        }
    })
})

// 提交数据
$('body').on('submit', '#edit-form', function(e) {
    e.preventDefault()
    let data = $(this).serialize()
    console.log(data);
    $.ajax({
        type: 'POST',
        url: '/my/category/update',
        data: data,
        success: function(res) {
            if (res.status === 0) {
                layer.msg(res.message)
                renderCategory()
                layer.close(editIndex)
            }
        }
    })
})